import paletteIcon from '../assets/icons/palette.svg?raw';
import { createButtonElement } from '../glue/ui/sidebar';

export const searchCoversButtonEl = createButtonElement('Search Covers', paletteIcon);

searchCoversButtonEl.addEventListener('click', () => {
	const titleEl = document.querySelector<HTMLElement>('h1.headings__title');
	if (!titleEl) return;

	const title = titleEl.innerText
		.replace(' - Single', '')
		.replace(' - EP', '');

	const artistEls = document.querySelectorAll<HTMLElement>('.headings__subtitles > a');
	const artist = Array.from(artistEls).map(el => el.innerText).join(' ');

	open(`https://covers.musichoarders.xyz?artist=${encodeURIComponent(artist)}&album=${encodeURIComponent(title)}`, '_blank');
});
